<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.my-swipe .van-swipe-item {
  background-color: #fff;
  padding: 0px 5px;
  overflow: hidden;
  box-sizing: border-box;
}

.title {
  font-weight: 600;
  font-size: 16px;
  font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif;
  text-transform: capitalize;
}

.tab-content {
  padding: 8px 5px;
  padding-bottom: 0px;
  white-space: nowrap;
  overflow: auto;
  text-align: left;

  .card {
    display: inline-block;
    width: 38%;
    height: auto;
    margin-right: 5px;
  }
}

.shop-list {
  width: 100%;
  margin: 0 auto;

  .subtitle {
    position: relative;
    top: 4px;
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    margin: 0 auto;
    background: #fff;
    text-align: left;
  }
}
</style>
<template>
  <div class="home" ref="home">
    <van-pull-refresh v-model="isLoading" @refresh="init">
      <div class="container" ref="test">
        <!-- 导航部分-->
        <van-nav-bar>
          <!--<van-icon size="20" name="arrow-left" slot="left" color="rgb(150, 151, 153)"/>-->
          <p slot="title" style="font-size: 14px">热门推荐</p>
        </van-nav-bar>
        <van-search disabled placeholder="请输入商品名称" @click="searchHandler"/>
        <!-- 轮播图部分-->
        <van-swipe :initial-swipe="currentIndex" class="my-swipe" :autoplay="3000" indicator-color="white"
                   @change="swipeHandler">
          <van-swipe-item v-for="(item,index) in swiperList" :key="index" @click="skipToDetail(item.link)">
            <img :src="item.img" width="100%">
          </van-swipe-item>
        </van-swipe>
        <!-- 人气榜单 秒杀疯抢 产品上新-->
        <van-tabs v-model="active">
          <van-tab title="人气榜单">
            <div class="tab-content">
              <div class="card" v-for="item in hotList" :key="item.proid">
                <shop-card :shop-data="item" :types="types"></shop-card>
              </div>
            </div>
          </van-tab>
          <van-tab title="秒杀疯抢">
            <div class="tab-content">
              <div class="card" v-for="item in secondKill" :key="item.proid">
                <shop-card :shop-data="item" :types="types"></shop-card>
              </div>
            </div>
          </van-tab>
          <van-tab title="上新商品">
            <div class="tab-content">
              <div class="card" v-for="item in newList" :key="item.proid">
                <shop-card :shop-data="item" :types="types"></shop-card>
              </div>
            </div>
          </van-tab>
        </van-tabs>
        <!--商品列表-->
        <van-row class="shop-list">
          <div class="subtitle">
            <img style="margin-left:8px" src="img/icon-recommend.png" width="20"/>
            <span style="margin-left:4px">店长推荐</span>
          </div>
          <van-col :span="col" v-for="item in recommendList" :key="item.proid">
            <div style="padding: 5px;box-sizing: border-box">
              <shop-card style="box-sizing: border-box" :shop-data="item" :types="types"></shop-card>
            </div>
          </van-col>
        </van-row>
      </div>
    </van-pull-refresh>
  </div>
</template>
<script>
import Vue from 'vue'
import ShopCard from '@/components/shop/ShopCard'
import {
  requestSwiper,
  requestHotSell,
  requestSecondKill,
  requestNewList,
  requestRecommandList
} from '../../api/commodity'
import {
  Search,
  Swipe,
  SwipeItem,
  NavBar,
  Icon,
  Grid,
  GridItem,
  Col,
  Row,
  Tab,
  Tabs,
  Image,
  Toast,
  PullRefresh
} from 'vant'
import $throttle from '../../../public/js/speed'

Vue.use(Icon)
Vue.use(Search)
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(NavBar)
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(Col)
Vue.use(Row)
Vue.use(Tab)
Vue.use(Tabs)
Vue.use(Image)
Vue.use(PullRefresh)

export default {
  name: 'Keep',
  data () {
    return {
      // 轮播图列表
      swiperList: [],
      // 推荐列表
      recommendList: [],
      // 热销列表
      hotList: [],
      // 秒杀列表
      secondKill: [],
      // 上新列表
      newList: [],
      page: 1,
      active: 0,
      currentIndex: 0,
      currentStore: 0,
      col: 12,
      types: 'shop-card',
      isLoading: false
    }
  },
  mounted () {
    this.init()
    this.scrollToBottom()
  },
  activated () {
    console.log('active')
    this.currentIndex = this.currentStore
    this.$refs.home.scrollTop = localStorage.getItem('scrollTop') || 0
    window.dispatchEvent(new Event('resize'))
  },
  methods: {
    init () {
      this.isLoading = true
      requestSwiper().then(res => {
        this.swiperList = res.data
      })
      requestHotSell().then(res => {
        this.hotList = res.data
      })
      requestSecondKill().then(res => {
        this.secondKill = res.data
      })
      requestNewList().then(res => {
        this.newList = res.data
      })
      requestRecommandList().then(res => {
        this.recommendList = res.data
        setTimeout(() => {
          this.isLoading = false
        }, 1500)
      })
    },
    swipeHandler (index) {
      this.currentStore = index
    },
    searchHandler () {
      this.$router.push('/search')
    },
    skipToDetail (link) {
      if (!link.length || !link) {
        return
      }
      if (link.length === 24) {
        this.$router.push('/shopDetail/' + link)
      }
    },
    // 监听滚动到底部
    scrollToBottom () {
      var home = this.$refs.home
      home.addEventListener('scroll', () => {
        //节流
        $throttle(() => {
          if (home.clientHeight + home.scrollTop >= home.scrollHeight - 50) {
            this.scrollBottomHandler()
          }
          localStorage.setItem('scrollTop', this.$refs.home.scrollTop)
        }, 300)
      })
    },
    //滚动到底部触发的函数
    scrollBottomHandler () {
      console.log('滚动到底部')
      Toast.loading({
        duration: 1000,
        forbidClick: false,
        message: '没有更多了'
      })
      this.page++
    },
  },
  components: {
    ShopCard
  }
}
</script>
